<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .box{
           position: absolute;
           top: 0;
           left: 300px;
       }
    </style>
</head>
<body>
<div>
    <p>姓名：<input type="text" name="name" id="username"></p>
    <p>电话：<input type="text" name="phone" id="phone"></p>
</div>
<div>
    <button onclick="add()">添加</button>
    <button onclick="reset()">重置</button>
    <button onclick="show()">显示</button>
</div>
<div class="box">
    <div class="reach">
        <p>姓名：<input type="text" id="reach1"></p>
        <p>电话：<input type="text" id="reach2"></p>
    </div>
    <div>
        <button onclick="reach()">查询</button>
        <button onclick="del()">删除</button>
    </div>
</div>
</body>
<script src="jquery.js"></script>
<script>
    //重置
    function reset() {
        username.value=""
        phone.value=""
    }
    var arr=[];

    //添加
    function add() {
        arr.push({
            username:username.value,
            phone:phone.value
        })
        username.value=""
        phone.value=""
    }

    //查询
    function reach() {
        $.each(arr,function (i, item) {
            if(reach1.value==item.username||reach2.value==item.phone){
                reach1.value=item.username
                reach2.value=item.phone
            }else{
                alert("没有该消息")
            }
        })

    }

    //删除
    function del() {
        $.each(arr,function (i, item) {
            if(reach1.value==item.username||reach2.value==item.phone){
                reach1.value=""
                reach2.value=""
                arr.splice(i,1)
            }
        })
    }
    function show() {
        console.log(arr)
    }
</script>
</html>